<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运营后台</title>
    <link href="/public/static/js/layui/css/layui.css" rel="stylesheet">
    <link href="/public/static/css/nprogress.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none
        }

        .nav {
            padding-right: 20px;
            background: #18bc9c;
            color: #fff;
            overflow: hidden
        }

        .nav .nav-logo {
            float: left;
            width: 180px;
            text-align: center;
            background-color: #15a589;
            height: 50px;
            line-height: 25px
        }

        .nav .nav-menu {
            float: right;
            line-height: 50px
        }

        .nav-menu .a1 {
            height: 28px;
            line-height: 27px;
            color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);
            box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
            text-align: center;
            width: 40px;
            display: inline-block
        }

        .nav-menu .a2 {
            color: #fff;
            font-size: 14px;
            padding: 0 5px;
            display: inline-block
        }

        .nav-menu .a2 img {
            width: 30px
        }

        .nav-menu .a1:hover, .nav-menu .a2:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #fff;
            cursor: pointer
        }

        .sidebar {
            position: absolute;
            top: 50px;
            bottom: 0
        }

        .sidebar-left {
            background: #222d32;
            width: 180px;
            height: 100%
        }

        .sidebar-user {
            padding: 20px 18px 0;
            height: 90px;
            box-sizing: border-box
        }

        .sidebar-user .avatar img {
            border-radius: 25px;
            margin-right: 10px
        }

        .sidebar-user .avatar {
            float: left
        }

        .sidebar-user .info {
            float: left
        }

        .sidebar-user .info a {
            margin-top: 5px;
            float: left;
            font-size: 14px;
            color: #fff
        }

        .sidebar-user .info p {
            color: #fff;
            font-size: 13px
        }

        .nav-tabs > li > a {
            display: block;
            margin-left: 10px;
            padding: 14px 18px 13px 20px;
            color: #b8c7ce;
            cursor: pointer;
            border-left: 3px solid transparent;
            border-top: 1px solid #32353e
        }

        .nav-tabs .nav-item {
            display: block;
            padding: 10px 18px 8px 35px;
            font-size: 12px;
            color: #b8c7ce;
            background-color: #1a1c20;
            border-left: 3px solid transparent;
            cursor: pointer;
            -webkit-transition: background .3s ease-out;
            transition: background .3s ease-out;
        }

        .nav-tabs .nav-item.active {
            background: #1e282c
        }

        .nav-tabs .nav-item:hover {
            color: #fff;
            border-left: 3px solid #18bc9c;
            background: #1e282c
        }

        .layui-body {
            position: fixed;
            top: 50px;
            bottom: 0;
            left: 180px
        }

        iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0
        }

        .breadcrumb {
            float: left;
            line-height: 50px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="nav-logo">
        <p>CMAX工作室</p>
        <p>LUL乃运营管理平台</p>
    </div>
    <div class="breadcrumb">
        <span>商城管理</span>
        <span style="margin-left: 5px;"> 》</span>
        <span class="title">商品配置</span>
    </div>
    <div class="nav-menu">
        <a class="a1" href="/admin/logout" title="退出登录">退出</a>
        <a class="a2" href="javascript:">
            <img src="/public/static/img/head.jpg" alt=""> Admin
        </a>
    </div>
</div>
<div class="sidebar">
    <div class="sidebar-left">
        <div class="sidebar-user">
            <div class="avatar">
                <img src="/public/static/img/head.jpg" alt="">
            </div>
            <div class="info">
                <a href="#">Admin</a>
                <p>ID：{$Think.session.admin_login['id']}</p>
            </div>
        </div>
        <ul class="nav-tabs">
            <li>
                <a>商城管理</a>
                <ul>
                    <li><a class="nav-item" data-href="/admin/goods">商品配置</a></li>
                    <li><a class="nav-item" data-href="/admin/goods">商品类型</a></li>
                    <li><a class="nav-item" data-href="/admin/goods">基础设置</a></li>
                </ul>
            </li>
            <li>
                <a>订单管理</a>
                <ul>
                    <li><a class="nav-item" data-href="/admin/goods">订单查询</a></li>
                    <li><a class="nav-item" data-href="/admin/goods">订单发货</a></li>
                    <li><a class="nav-item" data-href="/admin/goods">摆摊管理</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layui-body">
    <iframe src="/admin/goods" frameborder="0"></iframe>
</div>
<script src="/public/static/js/layui/layui.all.js"></script>
<script src="/public/static/css/nprogress.min.js"></script>
<script>
    $ = layui.jquery;

    var $iframe = $('iframe');

    $('.nav-item').click(function () {
        NProgress.start();
        $iframe.attr('src', $(this).data('href'));
        $iframe.load(function () {
            NProgress.done();
        });

        $(".breadcrumb .title").html($(this).html());

        $('.nav-item').removeClass('active');
        $(this).addClass('active');
    });
</script>
</body>
</html>